import Vue from "vue"
import VueRouter from "vue-router"
import {
  storage
} from "@/utils"
import config from "@/utils/config"
import Home from "@/views/Home.vue"
import Layout from "@/views/layout/layout.vue"

/*
 * 调用路由跳转方法时会返回一个promise对象
 * 如果不做处理就会被报出一个promise 错误，不影响运行
 * 下列方法是给路由push方法添加promise catch捕获异常，
 *这样就不会报报Uncaught (in promise)的问题
 * (解决在当前路由跳转到当前路由报错的问题)
 * */
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location, onResolve, onReject) {
  if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
  return originalPush.call(this, location)
    .catch((err) => err)
}
// 开发参数 -e
Vue.use(VueRouter)

const adminPages = []

const whiteList = [] // 登录验证名单

adminPages.forEach((v) => {
  const {
    path
  } = v
  v.children && v.children.forEach((val) => {
    let str = ""
    if (path) {
      str = `${path}/${val.path}`
    } else {
      str = `/${val.path}`
    }
    whiteList.push(str)
  })
})

const routes = [
  {
    path: "/",
    name: "home",
    redirect: "/generate-vue",
    component: Home
  },
  {
    path: "/generate-vue",
    name: "generateVue",
    component: () => import("@/views/generateVue.vue")
  },
  {
    path: "/about",
    name: "about",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import("@/views/About.vue")
  },
  ...adminPages,
  {
    // 测试 (无权限页面)
    path: "/test",
    name: "Test",
    props: true, // 此时params就是组件的props
    component: () => import("@/views/test.vue"),
    meta: {
      title: "401"
    }
  },
  {
    path: "/preview-img",
    component: () => import(/* webpackChunkName: "admin" */ "@/views/previewImg/previewImg.vue"),
    meta: {
      title: "预览图片"
    }
  },
  {
    // 401页面 (无权限页面)
    path: "/401",
    component: () => import(/* webpackChunkName: "error" */ "@/views/error/401.vue"),
    meta: {
      title: "401"
    }
  },
  {
    // 404页面
    path: "/404",
    component: () => import(/* webpackChunkName: "error" */ "@/views/error/404.vue"),
    meta: {
      title: "404"
    }
  },
  {
    // 找不到的页面都到这个路由 可做404页面
    path: "*",
    component: () => import("@/views/error/404.vue"),
    meta: {
      title: "404"
    }
  }
]

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes
})

router.beforeEach((to, from, next) => {
  /* 路由发生变化修改页面title */
  if (to.meta.title) {
    document.title = `${to.meta.title}`
  } else {
    document.title = "生成"
  }
  const user = storage.get(config.userCatchKey)

  let isLogin = false
  if (user != null && user.token) {
    isLogin = true
  }
  isLogin = true
  // 执行拦截判定
  if (!isLogin) {
    // to 目的路由对象 from 来源路由对象
    console.log(to.path)
    if (whiteList.indexOf(to.path) !== -1) {
      /**
       * 登录状态-可使用aixos进行请求，拉取服务器数据，获取用户登录状态
       * 强烈建议在本地使用localStorage或sessionStorage和vuex共同管理用户登录态，避免每次进入时都拉取服务器端接口以验证用户是否登录，额外消耗对服务器的请求，提升用户体验
       * 如果已登录，则更新store中存储的loginName -- 详细查看下面的store配置
       * 未登录，则直接跳转走
       */

      next("/login")
    } else {
      // 不执行拦截，直接进入该路由
      next()
    }

    // 处理方式二：使用window.loaction.href方式，需要执行next(false)配合使用
    // window.location.href = '指定的登录地址?redirectUrl=' + to.fullPath
    // next(false)
  } else {
    // 已登录，直接进入
    next()
  }
})

export default router
